/**
* 设备详情 套餐充值
*/ 
<template>
  <div class="main">
    <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-demo">
        <el-menu-item v-for="item in nav" :key="item.id" :index="item.url">
            <template slot="title">
                <span>{{item.name}}</span>
            </template>
        </el-menu-item>
    </el-menu>

    <div class="view">
        <router-view></router-view>
    </div>

  </div>
</template>

<script>
export default {
    name:'comboRecharge',
    data() {
        return {
            nav:[
                {
                    id:1,
                    name:'已购买套餐',
                    hasThird: null,
                    url: '/components/DeviceDetails/bought',
                },
                {
                    id:2,
                    name:'可购买套餐',
                    hasThird: null,
                    url: '/components/DeviceDetails/choose',
                },
            ],
        };
    },
}
</script>

<style lang="scss" scoped>
    .main{
        .el-menu{
            width: 20%;
            border-right: 0.5px solid #fff;
            float: left;
            text-align: center;
        }
        .view{
            width: 79.5%;
            height: 400px;
            float: left;
        }
    }
</style>